<!-- BEGIN: Subheader -->
<div class="m-subheader">
	<div class="d-flex align-items-center">
		<div class="mr-auto">
			<h3 class="m-subheader__title m-subheader__title--separator">
				Stack
			</h3>
			<ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
				<li class="m-nav__item m-nav__item--home">
					<a href="#" class="m-nav__link m-nav__link--icon">
						<i class="m-nav__link-icon la la-home"></i>
					</a>
				</li>
				<li class="m-nav__separator">
					-
				</li>
				<li class="m-nav__item">
					<a href="" class="m-nav__link">
						<span class="m-nav__link-text">
							Base
						</span>
					</a>
				</li>
				<li class="m-nav__separator">
					-
				</li>
				<li class="m-nav__item">
					<a href="" class="m-nav__link">
						<span class="m-nav__link-text">
							Stack
						</span>
					</a>
				</li>
			</ul>
		</div>
		<div>
			<div class="m-dropdown m-dropdown--inline m-dropdown--arrow m-dropdown--align-right m-dropdown--align-push" data-dropdown-toggle="hover" aria-expanded="true">
				<a href="#" class="m-portlet__nav-link btn btn-lg btn-secondary  m-btn m-btn--outline-2x m-btn--air m-btn--icon m-btn--icon-only m-btn--pill  m-dropdown__toggle">
					<i class="la la-plus m--hide"></i>
					<i class="la la-ellipsis-h"></i>
				</a>
				<div class="m-dropdown__wrapper">
					<span class="m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust"></span>
					<div class="m-dropdown__inner">
						<div class="m-dropdown__body">
							<div class="m-dropdown__content">
								<ul class="m-nav">
									<li class="m-nav__section m-nav__section--first m--hide">
										<span class="m-nav__section-text">
											Quick Actions
										</span>
									</li>
									<li class="m-nav__item">
										<a href="" class="m-nav__link">
											<i class="m-nav__link-icon flaticon-share"></i>
											<span class="m-nav__link-text">
												Activity
											</span>
										</a>
									</li>
									<li class="m-nav__item">
										<a href="" class="m-nav__link">
											<i class="m-nav__link-icon flaticon-chat-1"></i>
											<span class="m-nav__link-text">
												Messages
											</span>
										</a>
									</li>
									<li class="m-nav__item">
										<a href="" class="m-nav__link">
											<i class="m-nav__link-icon flaticon-info"></i>
											<span class="m-nav__link-text">
												FAQ
											</span>
										</a>
									</li>
									<li class="m-nav__item">
										<a href="" class="m-nav__link">
											<i class="m-nav__link-icon flaticon-lifebuoy"></i>
											<span class="m-nav__link-text">
												Support
											</span>
										</a>
									</li>
									<li class="m-nav__separator m-nav__separator--fit"></li>
									<li class="m-nav__item">
										<a href="#" class="btn btn-outline-danger m-btn m-btn--pill m-btn--wide btn-sm">
											Submit
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Subheader -->
<div class="m-content">
	<div class="row">
		<div class="col-md-6">
			<!--begin::Portlet-->
			<div class="m-portlet m-portlet--tab">
				<div class="m-portlet__head">
					<div class="m-portlet__head-caption">
						<div class="m-portlet__head-title">
							<span class="m-portlet__head-icon m--hide">
								<i class="la la-gear"></i>
							</span>
							<h3 class="m-portlet__head-text">
								Base Stack Examples
							</h3>
						</div>
					</div>
				</div>
				<div class="m-portlet__body">
					<!--begin::Section-->
					<div class="m-section">
						<span class="m-section__sub">
							Metronic's Stack allows building an equal height flexbile blocks easily:
						</span>
						<div class="m-section__content">
							<div class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
								<div class="m-demo__preview">
									<div class="m-stack m-stack--ver m-stack--general m-stack--demo">
										<div class="m-stack__item">
											Item 1
										</div>
										<div class="m-stack__item">
											Item 2
										</div>
										<div class="m-stack__item">
											Item 3
										</div>
										<div class="m-stack__item">
											Item 4
										</div>
									</div>
								</div>
							</div>
						</div>
						<span class="m-section__sub">
							Item vertical and horizontal aligments done super easy:
						</span>
						<div class="m-section__content">
							<div class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
								<div class="m-demo__preview">
									<div class="m-stack m-stack--ver m-stack--general m-stack--demo">
										<div class="m-stack__item m-stack__item--left">
											Left aligment
										</div>
										<div class="m-stack__item m-stack__item--center">
											Center aligment
										</div>
										<div class="m-stack__item m-stack__item--right">
											Right aligment
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="m-section__content">
							<div class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
								<div class="m-demo__preview">
									<div class="m-stack m-stack--ver m-stack--general m-stack--demo">
										<div class="m-stack__item m-stack__item--center m-stack__item--top">
											Top aligment
										</div>
										<div class="m-stack__item m-stack__item--center m-stack__item--middle">
											Middle aligment
										</div>
										<div class="m-stack__item m-stack__item--center m-stack__item--bottom">
											Bottom aligment
										</div>
									</div>
								</div>
							</div>
						</div>
						<span class="m-section__sub">
							Enable any number of fixed and fluid height items:
						</span>
						<div class="m-section__content">
							<div class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
								<div class="m-demo__preview">
									<div class="m-stack m-stack--ver m-stack--general m-stack--demo">
										<div class="m-stack__item m-stack__item--center m-stack__item--middle" style="width: 120px;">
											Fixed width - 120px
										</div>
										<div class="m-stack__item m-stack__item--center m-stack__item--middle m-stack__item--fluid">
											Fluid width - 100%
										</div>
										<div class="m-stack__item m-stack__item--center m-stack__item--middle m-stack__item--fluid">
											Fluid width - 100%
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="m-section__content">
							<div class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
								<div class="m-demo__preview">
									<div class="m-stack m-stack--ver m-stack--general m-stack--demo">
										<div class="m-stack__item m-stack__item--center m-stack__item--middle" style="width: 150px;">
											Fixed width - 150px
										</div>
										<div class="m-stack__item m-stack__item--center m-stack__item--middle m-stack__item--fluid">
											Fluid width - 100%
										</div>
										<div class="m-stack__item m-stack__item--center m-stack__item--middle" style="width: 150px;">
											Fixed width - 150px
										</div>
									</div>
								</div>
							</div>
						</div>
						<span class="m-section__sub">
							Default stack comes with fluid width
							<code>
							width: 100%
						</code>
						. With inline stack option you can have
						<code>
						width:auto
					</code>
					stack:
				</span>
				<div class="m-section__content">
					<div class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
						<div class="m-demo__preview">
							<div class="m-stack m-stack--ver m-stack--general m-stack--demo m-stack--inline">
								<div class="m-stack__item m-stack__item--center m-stack__item--middle" style="width: 120px;">
									Free content
								</div>
								<div class="m-stack__item m-stack__item--center m-stack__item--middle">
									Free content
								</div>
								<div class="m-stack__item m-stack__item--center m-stack__item--middle">
									Longer free content
								</div>
							</div>
						</div>
					</div>
				</div>
				<span class="m-section__sub">
					Unlimited level of nesting supported:
				</span>
				<div class="m-section__content">
					<div class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
						<div class="m-demo__preview">
							<div class="m-stack m-stack--ver m-stack--general m-stack--demo">
								<div class="m-stack__item">
									Item
									<div class="m-stack m-stack--ver m-stack--general m-stack--demo">
										<div class="m-stack__item m-stack__item--center m-stack__item--top">
											Item
										</div>
										<div class="m-stack__item m-stack__item--center m-stack__item--middle">
											Item
										</div>
										<div class="m-stack__item m-stack__item--center m-stack__item--bottom">
											Item
										</div>
									</div>
								</div>
								<div class="m-stack__item">
									Item
									<div class="m-stack m-stack--ver m-stack--general m-stack--demo">
										<div class="m-stack__item m-stack__item--center m-stack__item--top">
											Item
										</div>
										<div class="m-stack__item m-stack__item--center m-stack__item--middle">
											Item
											<div class="m-stack m-stack--ver m-stack--general m-stack--demo">
												<div class="m-stack__item m-stack__item--center m-stack__item--top">
													Item
												</div>
												<div class="m-stack__item m-stack__item--center m-stack__item--middle">
													Item
												</div>
												<div class="m-stack__item m-stack__item--center m-stack__item--bottom">
													Item
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--end::Section-->
		</div>
	</div>
	<!--end::Portlet-->  		<!--begin::Portlet-->
	<div class="m-portlet m-portlet--tab">
		<div class="m-portlet__head">
			<div class="m-portlet__head-caption">
				<div class="m-portlet__head-title">
					<span class="m-portlet__head-icon m--hide">
						<i class="la la-gear"></i>
					</span>
					<h3 class="m-portlet__head-text">
						Responsive Modes
					</h3>
				</div>
			</div>
		</div>
		<div class="m-portlet__body">
			<!--begin::Section-->
			<div class="m-section">
				<span class="m-section__sub">
					You can set responsive mode to your stack by just enabling one of responsive mode with special classes
					<code>
					m-stack--general
				</code>
				,
				<code>
				m-stack--desktop
			</code>
			,
			<code>
			m-stack--tablet
		</code>
		,
		<code>
		m-stack--desktop-and-tablet
	</code>
	,
	<code>
	m-stack--mobile
</code>
,
<code>
m-stack--tablet-and-mobile
</code>
. 					When
<code>
m-stack--general
</code>
mode used the stack mode will remain but with other modes, for example with
<code>
m-stack--tablet
</code>
the stack mode will be activate within the device width and outside the device with the stack will be have just normal block tag.
</span>
<div class="m-section__content">
	<div class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
		<div class="m-demo__preview">
			<code>
			m-stack--general:
		</code>
		<div class="m--space-10"></div>
		<div class="m-stack m-stack--ver m-stack--general m-stack--demo">
			<div class="m-stack__item m-stack__item--center m-stack__item--top">
				Top
			</div>
			<div class="m-stack__item m-stack__item--center m-stack__item--middle">
				Middle
			</div>
			<div class="m-stack__item m-stack__item--center m-stack__item--bottom">
				Bottom
			</div>
		</div>
	</div>
</div>
<div class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
	<div class="m-demo__preview">
		<code>
		m-stack--desktop:
	</code>
	<div class="m--space-10"></div>
	<div class="m-stack m-stack--ver m-stack--desktop m-stack--demo">
		<div class="m-stack__item m-stack__item--center m-stack__item--top">
			Top
		</div>
		<div class="m-stack__item m-stack__item--center m-stack__item--middle">
			Middle
		</div>
		<div class="m-stack__item m-stack__item--center m-stack__item--bottom">
			Bottom
		</div>
	</div>
</div>
</div>
<div class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
	<div class="m-demo__preview">
		<code>
		m-stack--tablet:
	</code>
	<div class="m--space-10"></div>
	<div class="m-stack m-stack--ver m-stack--tablet m-stack--demo">
		<div class="m-stack__item m-stack__item--center m-stack__item--top">
			Top
		</div>
		<div class="m-stack__item m-stack__item--center m-stack__item--middle">
			Middle
		</div>
		<div class="m-stack__item m-stack__item--center m-stack__item--bottom">
			Bottom
		</div>
	</div>
</div>
</div>
<div class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
	<div class="m-demo__preview">
		<code>
		m-stack--mobile:
	</code>
	<div class="m--space-10"></div>
	<div class="m-stack m-stack--ver m-stack--mobile m-stack--demo">
		<div class="m-stack__item m-stack__item--center m-stack__item--top">
			Top
		</div>
		<div class="m-stack__item m-stack__item--center m-stack__item--middle">
			Middle
		</div>
		<div class="m-stack__item m-stack__item--center m-stack__item--bottom">
			Bottom
		</div>
	</div>
</div>
</div>
</div>
</div>
<!--end::Section-->
</div>
</div>
<!--end::Portlet-->
</div>
<div class="col-md-6">
	<!--begin::Portlet-->
	<div class="m-portlet m-portlet--tab">
		<div class="m-portlet__head">
			<div class="m-portlet__head-caption">
				<div class="m-portlet__head-title">
					<span class="m-portlet__head-icon m--hide">
						<i class="la la-gear"></i>
					</span>
					<h3 class="m-portlet__head-text">
						Horizontal Stack Examples
					</h3>
				</div>
			</div>
		</div>
		<div class="m-portlet__body">
			<!--begin::Section-->
			<div class="m-section">
				<span class="m-section__sub">
					Metronic's Stack allows building an equal height flexbile blocks easily:
				</span>
				<div class="m-section__content">
					<div class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
						<div class="m-demo__preview">
							<div class="m-stack m-stack--hor m-stack--general m-stack--demo" style="height: 400px">
								<div class="m-stack__item">
									<div class="m-stack__demo-item">
										Item 1
									</div>
								</div>
								<div class="m-stack__item">
									<div class="m-stack__demo-item">
										Item 2
									</div>
								</div>
								<div class="m-stack__item">
									<div class="m-stack__demo-item">
										Item 3
									</div>
								</div>
								<div class="m-stack__item">
									<div class="m-stack__demo-item">
										Item 4
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<span class="m-section__sub">
					Item vertical and horizontal aligments done super easy:
				</span>
				<div class="m-section__content">
					<div class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
						<div class="m-demo__preview">
							<div class="m-stack m-stack--hor m-stack--general m-stack--demo" style="height: 400px">
								<div class="m-stack__item m-stack__item--left">
									<div class="m-stack__demo-item">
										Left aligment
									</div>
								</div>
								<div class="m-stack__item m-stack__item--center">
									<div class="m-stack__demo-item">
										Center aligment
									</div>
								</div>
								<div class="m-stack__item m-stack__item--right">
									<div class="m-stack__demo-item">
										Right aligment
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<span class="m-section__sub">
					Enable any number of fixed and fluid width items:
				</span>
				<div class="m-section__content">
					<div class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
						<div class="m-demo__preview" style="height: 600px">
							<div class="m-stack m-stack--hor m-stack--general m-stack--demo">
								<div class="m-stack__item m-stack__item--center m-stack__item--middle" style="height: 100px;">
									<div class="m-stack__demo-item">
										Fixed height - 100px
									</div>
								</div>
								<div class="m-stack__item m-stack__item--center m-stack__item--middle m-stack__item--fluid">
									<div class="m-stack__demo-item">
										Fluid height - 100%
									</div>
								</div>
								<div class="m-stack__item m-stack__item--center m-stack__item--middle" style="height: 100px;">
									<div class="m-stack__demo-item">
										Fixed height - 100px
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<span class="m-section__sub">
					Nested horizontal and vertical stacks:
				</span>
				<div class="m-section__content">
					<div class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
						<div class="m-demo__preview" style="height: 600px">
							<div class="m-stack m-stack--hor m-stack--general m-stack--demo">
								<div class="m-stack__item m-stack__item--center m-stack__item--middle" style="height: 100px;">
									<div class="m-stack m-stack--ver m-stack--general m-stack--demo" style="height: 100%">
										<div class="m-stack__item m-stack__item--center m-stack__item--top">
											Item
										</div>
										<div class="m-stack__item m-stack__item--center m-stack__item--middle">
											Item
										</div>
										<div class="m-stack__item m-stack__item--center m-stack__item--bottom">
											Item
										</div>
									</div>
								</div>
								<div class="m-stack__item m-stack__item--center m-stack__item--middle m-stack__item--fluid">
									<div class="m-stack m-stack--ver m-stack--general m-stack--demo" style="height: 100%">
										<div class="m-stack__item m-stack__item--center m-stack__item--top">
											Item
										</div>
										<div class="m-stack__item m-stack__item--center m-stack__item--middle">
											Item
										</div>
										<div class="m-stack__item m-stack__item--center m-stack__item--bottom">
											Item
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--end::Section-->
		</div>
	</div>
	<!--end::Portlet-->
</div>
</div>
</div>
